<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        max-width: 100%;
      }

      #download-btn {
        display: block;
        margin: 40px auto;
      }

      #content {
        background-image: url("./背景图02.jpg");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 30px 40px;
        overflow: hidden;
        margin: 20px;
      }

      .content-con {
        margin-bottom: 20px;
      }

      .btn-con {
        text-align: center;
      }

      .text {
        color: red;
        padding-left: 60px;
      }

      .edit .el-form {
        width: 90%;
        margin: auto;
      }
    </style>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui@2.15.6/lib/theme-chalk/index.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.2.2/html2canvas.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui@2.15.6/lib/index.js"></script>
  </head>

  <body>
    <div id="app">
      <div class="content-con" v-show="true">
        <div id="content">
          <h1>中奖名单</h1>
          <div class="label">
            <span>运气王：</span>
            <br />
            <div class="text">{{luck}}</div>
          </div>
          <div class="label">
            <span>非洲王：</span>
            <br />
            <div class="text" v-for="item in labelList" :key="item">
              {{item}}
            </div>
          </div>
        </div>
        <div class="btn-con">
          <el-button
            :disabled="isDisabledDownloadBtn"
            size="small"
            type="primary"
            @click="download"
            >下载图片</el-button
          >
        </div>
      </div>

      <div class="edit">
        <el-form>
          <el-form-item label="运气王:">
            <el-input type="text" clearable v-model="luck"></el-input>
          </el-form-item>
          <el-form-item label="非洲王:">
            <el-input
              type="textarea"
              clearable
              aria-placeholder="如果有多个，用===隔开"
              v-model="labels"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          luck: "那是我",
          labels: "嚣张的茄子===迷茫的土豆===嚣的茄子===的土豆===茄子===迷茫豆",
        },
        computed: {
          labelList() {
            if (!this.labels) return [];
            return this.labels.split("===");
          },
          isDisabledDownloadBtn() {
            return !this.labels || !this.luck;
          },
        },
        methods: {
          download() {
            html2canvas(document.getElementById("content")).then(function (
              canvas
            ) {
              var imgData = canvas.toDataURL("image/jpg");
              var img = new Image();
              img.src = imgData;

              // 创建一个链接并将图像添加到链接中
              var link = document.createElement("a");
              link.href = imgData;
              link.download = "中奖名单.jpg";
              link.appendChild(img);

              // 将链接添加到页面并触发下载
              document.body.appendChild(link);
              link.click();
              document.body.removeChild(link);
            });
          },
        },
      });
    </script>
  </body>
</html>
